<template>
  <section>
    <div class="load"  v-loading="loading"  :element-loading-text="msg">
    </div>
  </section>
</template>

<script>
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
  export default {
    name: "loadingPage",
    data(){
      return{
        loading:false,
        stepList:[
          {id:1,content:'初始化中……'},
          {id:2,content:'获取用户数据'},
          {id:3,content:'加载模块数据'},
          {id:4,content:'生成菜单中……'},
          {id:5,content:'完成'},
          
        ],
        msg:'加载页'
      }
    },
    watch:{
      msg(nv,ov){
        if(nv === '完成'){
          this.loading=false
        }
      }
    },
    created(){
      this.msg='加载页'
      this.loading=true
        //模拟请求步骤
      for(let i=0;i<this.stepList.length;i++){
        let step=this.stepList[i]
        setTimeout(()=>{
          this.msg=step.content
        },i*500)
      }
      return
      this.init()
    },
    methods:{
      ...mapActions([
        'test'
      ]),
      init(){

      }
    }
  }
</script>

<style scoped>
.load{
  width: 100%;
  position: absolute;
  top:30%;

}
</style>
